<template>

  <a-card :bordered="false">
     <!--左侧卡片树-->
    <a-col :span="6">
      <a-card hoverable style="width: 300px;height: 800px">
        <a-tree :tree-data="topicTree" :expandedKeys.sync="expandedKeys">
          <template #title="{ key: treeKey, title }">
            <a-dropdown :trigger="['contextmenu']">
              <span @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">{{ title }}</span>
            </a-dropdown>
          </template>
        </a-tree>
      </a-card>
    </a-col>
    <a-col :span="18">
    <a-card hoverable style="width: 900px;height: 800px" :span="12">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="6">
            <a-col :xl="3" :lg="7" :md="8" :sm="12">
              <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
            </a-col>
            <a-col :xl="3" :lg="7" :md="8" :sm="12">
              <a-button type="primary" icon="download" @click="handleExportXls('题库')">导出</a-button>
            </a-col>
<!--            <a-col :xl="3" :lg="7" :md="8" :sm="12">
              <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
                <a-button type="primary" icon="import">导入</a-button>
              </a-upload>
            </a-col>-->
            <a-col :xl="6" :lg="7" :md="8" :sm="12">
              <a-form-item label="题干">
                <a-input placeholder="请输入题干" v-model="queryParam.questionStem"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="3" :lg="7" :md="8" :sm="12">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            </span>
              <div class="table-page-search-wrapper">
                <a-form layout="inline" @keyup.enter.native="searchQuery">
                  <a-row :gutter="24">
                  </a-row>
                </a-form>
              </div>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!--右侧卡片-->
      <a-collapse accordion>
        <a-collapse-panel :header="item.questionStem" v-for="(item,key) in rightTopicList" :key="key">
          <div>
            <p>公司：{{item.enterpriseName}}</p>
            <p>解析：{{item.answer}}</p>
            <a-row>
              <a-col :span="10">
                <a-config-provider :auto-insert-space-in-button="false" style="float: right;margin-bottom: 10px" >
                  <a-button type="primary" @click="del(item.id)">
                    删除
                  </a-button>
                </a-config-provider>
              </a-col>
              <a-row>
                <a-col :span="10">
                  <a-config-provider :auto-insert-space-in-button="false" style="float: right;margin-bottom: 10px">
                    <a-button type="primary" @click="selectByQuestionId(item.id)">
              <span slot="action" slot-scope="text, record">
              </span>
                      编辑
                    </a-button>
                  </a-config-provider>
                </a-col>
              </a-row>
            </a-row>
          </div>
          <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(record)">详情</a>
              </a-menu-item>
              <a-menu-item v-if='record.applyStatusId==0'>
                 <a @click="upStatus(record.id,1)">更改状态</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
        </a-collapse-panel>
      </a-collapse>
    </a-card>
    </a-col>
    <interview-question-bank-modal ref="modalForm" @ok="modalFormOk"></interview-question-bank-modal>
  </a-card>
</template>

<script>


  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '../../../utils/mixin'
  import { JeecgListMixin } from '../../../mixins/JeecgListMixin'
  import InterviewQuestionBankModal from './modules/InterviewQuestionBankModal'
  import {deleteAction, getAction, postAction} from "../../../api/manage";
  import { defineComponent, ref } from 'vue';

  export default {
    name: 'InterviewQuestionBankList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      InterviewQuestionBankModal,
    },
    data () {
      return {
        description: '题库管理页面',
        expandedKeys: [],
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'面试题编号',
            align:"center",
            dataIndex: 'topicId'
          },
          {
            title:'公司编号',
            align:"center",
            dataIndex: 'enterpriseName'
          },
          {
            title:'题干',
            align:"center",
            dataIndex: 'questionStem'
          },
          {
            title:'面试岗位',
            align:"center",
            dataIndex: 'interviewJob'
          },
          {
            title:'面试问题类型',
            align:"center",
            dataIndex: 'topicTypeId_dictText'
          },
          {
            title:'面试问题描述',
            align:"center",
            dataIndex: 'topicAbout',
            scopedSlots: {customRender: 'htmlSlot'}
          },
          {
            title:'答案解析',
            align:"center",
            dataIndex: 'answer',
            scopedSlots: {customRender: 'htmlSlot'}
          },
          {
            title:'逻辑删除',
            align:"center",
            dataIndex: 'delFlag'
          },
          {
            title:'提供人',
            align:"center",
            dataIndex: 'provider'
          },
          {
            title:'创建日期',
            align:"center",
            dataIndex: 'createTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/interviewquestionbank/interviewQuestionBank/list",
          delete: "/interviewquestionbank/interviewQuestionBank/delete",
          deleteBatch: "/interviewquestionbank/interviewQuestionBank/deleteBatch",
          exportXlsUrl: "/interviewquestionbank/interviewQuestionBank/exportXls",
          importExcelUrl: "interviewquestionbank/interviewQuestionBank/importExcel",
          getTreeTopicUrl:"/interviewquestionbank/interviewQuestionBank/getTreeTopic",
          getRightTopicUrl:"/interviewquestionbank/interviewQuestionBank/getRightTopic",
          deltopicUrl:"/interviewquestionbank/interviewQuestionBank/delete",
          updatetopicUrl:"/interviewquestionbank/interviewQuestionBank/updateById",
          selectByQuestionIdUrl:"/interviewquestionbank/interviewQuestionBank/selectByQuestionId"
        },
        dictOptions:{},
        superFieldList:[],
        majorId:'',
        topicTree:[],
        rightTopicList:[]
      }
    },
    created() {
      this.getTreeTopic();
      this.getSuperFieldList();
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      /*回显编辑页面*/
      selectByQuestionId(id){
        postAction(this.url.selectByQuestionIdUrl+'?id='+id).then((res)=> {
          if (res.success) {
            debugger
            this.handleEdit(res.result)
          }
        })
      },
      update(id){
        /*alert(id)*/
        postAction(this.url.updatetopicUrl+'?id='+id).then((res)=>{
          if (res.success){
            this.$message.success('编辑成功!');
            /*this.reload();//页面局部刷新*/
            this.getTreeTopic();
          }else{
            this.$message.warning("编辑失败!");
          }
        })
      },
      del(id){
        deleteAction(this.url.deltopicUrl+'?id='+id).then((res)=>{
            if (res.success){
              this.$message.success('删除成功!');
              /*this.reload();//页面局部刷新*/
              this.getTreeTopic();
            }else{
              this.$message.warning("删除失败!");
            }
          })
      },
      getTreeTopic(){
        getAction(this.url.getTreeTopicUrl).then((resp)=>{
          if (resp.success){
            this.topicTree=resp.result
            for (let i = 0; i < this.topicTree.length; i++) {
              this.expandedKeys.push(this.topicTree[i].key)
            }
          }
        })
      },
      initDictConfig(){
      },
      //树控件
      onContextMenuClick(treeKey) {
        alert(treeKey)
        getAction(this.url.getRightTopicUrl+"?topicTypeId="+treeKey).then((resp)=>{
          if (resp.success){
            this.rightTopicList=resp.result
          }
        })
      },
      getSuperFieldList(){
        let fieldList=[];
        fieldList.push({type:'string',value:'topicId',text:'面试题编号',dictCode:''})
        fieldList.push({type:'string',value:'enterpriseName',text:'公司编号',dictCode:''})
        fieldList.push({type:'string',value:'questionStem',text:'题干',dictCode:''})
        fieldList.push({type:'string',value:'interviewJob',text:'面试岗位',dictCode:''})
        fieldList.push({type:'string',value:'topicTypeId',text:'面试问题类型',dictCode:''})
        fieldList.push({type:'string',value:'topicAbout',text:'面试问题描述',dictCode:''})
        fieldList.push({type:'string',value:'answer',text:'答案解析',dictCode:''})
        fieldList.push({type:'string',value:'delFlag',text:'逻辑删除',dictCode:''})
        fieldList.push({type:'string',value:'provider',text:'提供人',dictCode:''})
        fieldList.push({type:'datetime',value:'createTime',text:'创建日期'})
        this.superFieldList = fieldList
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>